<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>后台管理</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/home-page.css" />
     <!-- 引入jq -->
     <script src="../js/jQuery3.7.1.js"></script> 
     <!-- 引入bootstrap -->
     <link rel="stylesheet" href="../css/bootstrap.css">
     <script src="../js/bootstrap.js"></script>
 
  </head>
  <body>
    <main class="main-container">
      <!-- 左侧菜单区域 -->
      <section class="left-menu-section">
          <h2><span class="glyphicon glyphicon-th-large"></span>&nbsp;管理菜单</h2>
          <ul class="left-menu-list">
              <li><a href="./userlist.html" target="iframe-content"><span class="glyphicon glyphicon-user"></span>&nbsp;用户管理</a></li>
              <li><a href="./merchantlist.html" target="iframe-content"><span class="glyphicon glyphicon-user"></span>&nbsp;商家管理</a></li>
              <li><a href="./delivererlist.html" target="iframe-content"><span class="glyphicon glyphicon-user"></span>&nbsp;配送员管理</a></li>
              <li><a href="./mamagerlist.html" target="iframe-content"><span class="glyphicon glyphicon-user"></span>&nbsp;管理员主页</a></li>
          </ul>
      </section>

      <!-- 右侧功能区域 -->
      <section class="right-function-section">
          <h2>系统功能</h2>
          <nav class="right-nav">
              <ul class="right-nav-list">
                  <li><a href="../index.html" target="_blank"><span class="glyphicon glyphicon-home"></span>&nbsp;平台首页</a></li>
                  <li><a href="./menu-statistics.html" target="iframe-content"><span class="glyphicon glyphicon-cutlery"></span>&nbsp;菜单统计</a></li>
                  <li><a href="./order-statistics.html" target="iframe-content"><span class="glyphicon glyphicon-signal"></span>&nbsp;订单统计</a></li>
                  <li><a href="./inventory-statistics.html" target="iframe-content"><span class="glyphicon glyphicon-signal"></span>&nbsp;商品库存统计</a></li>
                  <li><a href="./payment-statistics.html" target="iframe-content"><span class="glyphicon glyphicon-signal"></span>&nbsp;支付统计</a></li>
                  <li><a href="./financial-report.html" target="iframe-content"><span class="glyphicon glyphicon-list"></span>&nbsp;财务报表</a></li>
                  <li><a href="./review-statistics.html" target="iframe-content"><span class="glyphicon glyphicon-signal"></span>&nbsp;评价统计</a></li>
                  <li><a href="./coupon-statistics.html" target="iframe-content"><span class="glyphicon glyphicon-piggy-bank"></span>&nbsp;优惠券</a></li>
                  <li><a href="./systemlog.html" target="iframe-content"><span class="glyphicon glyphicon-list"></span>&nbsp;查看系统日志</a></li>
                  <li><a href="./feedback.html" target="iframe-content"><span class="glyphicon glyphicon-list"></span>&nbsp;用户反馈</a></li>
                  <li><a href="./notice.html" target="iframe-content"><span class="glyphicon glyphicon-list"></span>&nbsp;系统公告</a></li>
                  <li><a href="./faqs.html" target="iframe-content"><span class="glyphicon glyphicon-wrench"></span>&nbsp;常见问题</a></li>
              </ul>
          </nav>

          <!-- 新增iframe用于嵌套展示点击链接后的页面 -->
          <iframe id="contentFrame" name="iframe-content" frameborder="0" src="welcome-page.html"></iframe>
      </section>
  </main>

  <script>
      // 获取所有系统功能链接
      const systemLinks = document.querySelectorAll('.right-nav-list a');

      // 为每个链接添加点击事件监听器
      systemLinks.forEach(link => {
          link.addEventListener('click', function (e) {
              e.preventDefault(); // 阻止默认链接跳转行为

              // 获取点击链接的目标地址
              const targetUrl = this.href;

              // 将目标地址设置到iframe的src属性，实现页面嵌套展示
              document.getElementById('contentFrame').src = targetUrl;
          });
      });
  </script>
  </body>
</html>
